﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="../Scripts/jquery-ui-1.8.16.custom/css/redmond/jquery-ui-1.8.16.custom.css">
    <script src="../Scripts/jquery-ui-1.8.16.custom/js/jquery-1.6.2.min.js"></script>
    <script src="../Scripts/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.core.js"></script>
    <script src="../Scripts/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.widget.js"></script>
    <script src="../Scripts/jquery-ui-1.8.16.custom/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script type="text/javascript"><!--        //--><![CDATA[//><!--
        startList = function () {
            if (document.all && document.getElementById) {
                navRoot = document.getElementById("menu");
                var allli = navRoot.getElementsByTagName("li")
                for (i = 0; i < allli.length; i++) {
                    node = allli[i];
                    node.onmouseover = function () {
                        this.className += " current";
                    }
                    node.onmouseout = function () {
                        this.className = this.className.replace(" current", "");
                    }
                }
            }
        }
        window.onload = startList;
        //--><!]]></script>
    <style type="text/css">
        body
        {
            font-family: Verdana;
            font-size: 12px;
            line-height: 1.5;
        }
        img
        {
            border-style: none;
        }
        a
        {
            color: #000;
            text-decoration: none;
        }
        a:hover
        {
            color: #F00;
        }
        #menu
        {
            width: 100px;
            border: 1px solid #CCC;
            border-bottom: none;
        }
        #menu ul
        {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        #menu ul li
        {
            background: #eee;
            padding: 0px 8px;
            height: 26px;
            line-height: 26px;
            border-bottom: 1px solid #CCC;
            position: relative;
        }
        #menu ul li ul
        {
            display: none;
            position: absolute;
            left: 100px;
            top: 0px;
            width: 200px;
            border: 1px solid #ccc;
            border-bottom: none;
        }
        #menu ul li.current ul
        {
            display: block;
        }
        #menu ul li:hover ul
        {
            display: block;
        }
    </style>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">网页版式布局</a>
                <ul>
                    <li><a href="#">自适应宽度</a></li>
                    <li><a href="#">固定宽度</a></li>
                </ul>
            </li>
            <li><a href="#">div+css教程</a>
                <ul>
                    <li><a href="#">新手入门</a></li>
                    <li><a href="#">视频教程</a></li>
                    <li><a href="#">常见问题</a></li>
                </ul>
            </li>
            <li><a href="#">div+css实例</a>
                <ul>
                <li>
                <div>ddddddddddddddddddddddddddddddd</div>
                <div>ddddddddddddddddddddddddddddddd</div>
                <div>ddddddddddddddddddddddddddddddd</div>
                <div>ddddddddddddddddddddddddddddddd</div>
                <div>ddddddddddddddddddddddddddddddd</div></li>
                </ul>
            </li>
            <li><a href="#">常用代码</a></li>
            <li><a href="#">站长杂谈</a></li>
            <li><a href="#">技术文档</a></li>
            <li><a href="#">资源下载</a></li>
            <li><a href="#">图片素材</a></li>
        </ul>
    </div>
    文章出处：标准之路(http://www.aa25.cn/div_css/905.shtml)
</body>
</html>
